<template>
  <div class="header acea-row row-middle row-between">
    <div class="left">
      <menu-unfold-outlined
        v-if="collapsed"
        class="trigger"
        :style="{fontSize:'18px'}"
        @click="foldHandle"
      />
      <menu-fold-outlined :style="{fontSize:'18px'}"  v-else class="trigger" @click="foldHandle" />
    </div>
  </div>
</template>

<script>
import {
  MenuUnfoldOutlined,
  MenuFoldOutlined,
} from '@ant-design/icons-vue';
import { ref } from 'vue';
import { useStore } from 'vuex'

export default {
  name:'Header',
  setup() {
    const store = useStore()
    const collapsed = ref(store.state.common.collapsed)

    // fold切换事件
    const foldHandle = ()=>{
      collapsed.value = !collapsed.value
      store.commit('common/changeCollapsed',collapsed.value)
    }

    return {
      collapsed,
      foldHandle
    };
  },
  components:{
    MenuUnfoldOutlined,
    MenuFoldOutlined,
  },
}
</script>

<style scoped>
  .header{
    width: 100%;
    padding: 0 20px;
    box-sizing: border-box;
  }
</style>